<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width"/>
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>能力导航</title>
    <link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/main.css" />
    <link rel="stylesheet" type="text/css" href="../../css/demo/myPower.css" />
</head>
<body>
  <div id="header">
      <div id="back"></div>
      <h3>能力导航</h3>
  </div>
  <div id="all">
      <div id="power_distribution_image">
          <!--  <img src="../../image/power_image.jpg" /> -->
      </div>
      <div class="power_text">
        <div class="achievement_span" >

          达成度
        </div>

        <div class="achievement">
          <div class="achievement_left">
          <span class="st">达成度比例：</span></div>
          <div class="achievement_right">
            <div class="progress">
              <div class="progress-bar progress-bar-info" role="progressbar"
                   aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                   style="width: 50%;">
                   50%
                  <span class="sr-only">50% 完成（成功）</span>
              </div>
            </div>
          </div>
        </div><br>

        <div class="partingLine"></div>

          <div class="achievement_span" >个人数据</div>

          <div class="achievement">
            <div class="achievement_left">
            <span class="st">理论知识</span></div>
            <div class="achievement_right">
              <div class="progress">
                <div class="progress-bar progress-bar-warning" role="progressbar"
                     aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                     style="width: 70%;">
                     70%
                    <span class="sr-only">70% 完成（成功）</span>
                </div>
              </div>
            </div>
          </div><br>

          <div class="achievement">
            <div class="achievement_left">
            <span class="st">实践能力</span></div>
            <div class="achievement_right">
              <div class="progress">
                <div class="progress-bar progress-bar-danger" role="progressbar"
                     aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                     style="width: 30%;">
                     30%
                    <span class="sr-only">30% 完成（成功）</span>
                </div>
              </div>
            </div>
          </div><br>

          <div class="achievement">
            <div class="achievement_left">
            <span class="st">特征评测</span></div>
            <div class="achievement_right">
              <div class="progress">
                <div class="progress-bar progress-bar-success" role="progressbar"
                     aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                     style="width: 90%;">
                     90%
                    <span class="sr-only">90% 完成（成功）</span>
                </div>
              </div>
            </div>
          </div><br>

          <div class="partingLine"></div>

      </div>
      <div class="position_text">
        <br>
          <div><span class="st">职业意向：</span><select><option>php</optiion><option>java</optiion><option>javascript</optiion><option>c语言</optiion><option>云计算</optiion><option>大数据-Hadoop技术</optiion><option>移动应用</optiion></select></div>
          <div><span class="st">意向工作区域：</span><select><option>长三角</optiion><option>珠三角</optiion><option>柳州</optiion><option>南宁</optiion></select></div>
      </div>
  </div>
</body>
<script src="../../script/echarts.min.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/jquery.js"></script>
<script type="text/javascript" src="../../script/main.js"></script>
<script type="text/javascript">
apiready=function(){
  back();
}
        var myChart = echarts.init(document.getElementById('power_distribution_image'));

        // 指定图表的配置项和数据
        option = {
            title : {
                text: '数据来源',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['51job','智联招聘','前程无忧','广西人才网','拉勾网']
            },
            series : [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {value:335, name:'51job'},
                        {value:310, name:'智联招聘'},
                        {value:234, name:'前程无忧'},
                        {value:135, name:'广西人才网'},
                        {value:1548, name:'拉勾网'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
//jquery
$(function(){
})
</script>
<script>
  $(function(){
  　　$(".achievement").click(function(){
        api.clearCache(function() {
            api.toast({
                msg: '该功能正在研发，敬请期待'
            });
        });
  　　});
  })
</script>
</html>
